<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>echarts</title>
    <style>
      .container {
        width: 800px;
        height: 400px;
        background-color: rgba(0,0,0,0.2);
      }
    </style>
  </head>
  <body>
    <div class="container"></div>
    <script src="./echarts.min.js"></script>
    <script>
      const myEcharts = echarts.init(document.querySelector('.container'))
      const option = {
        //布局
        grid:{ 
          left:10,
          right:0,
          containLabel:true, //不会让左边显示的文字消失 
        },
        xAxis: {
          data: [
            '一月',
            '二月',
            '三月',
            '四月',
            '五月',
            '六月',
            '七月',
            '八月',
            '九月',
            '十月',
            '十一月',
            '十二月',
          ],
        },
        yAxis: {},
        // 提示框组件：鼠标移入会有数据提示
        tooltip: {},
        // 工具箱
        toolbox: {
          feature: { dataView: {}, saveAsImage: {} },
        },
        // 数据缩放：查看一定范围内数据
        dataZoom: [{ type: 'slider' }],
        // 图例：切换显示隐藏图表
        legend: {
          data: ['柱形图', '折线图', '饼图'],
        },
        series: [
          {
            name: '柱形图',
            type: 'bar',
            data: [20, 25, 18, 30, 10, 20, 25, 18, 30, 10, 22, 33],
          },
          {
            name: '折线图',
            type: 'line',
            data: [30, 35, 28, 40, 20, 30, 35, 28, 40, 20, 32, 43],
          },
          {
            name: '饼图',
            type: 'pie',
            data: [
              {
                name: 'xx',
                value: 10,
              },
              {
                name: 'yy',
                value: 20,
              },
              {
                name: 'zz',
                value: 30,
              },
            ],
            radius: ['0', '20%'], // 半径
            center: ['70%', '12%'], // 圆心点坐标
          },
        ],
      }
      myEcharts.setOption(option)
    </script>
  </body>
</html>
